<template>
  <div class="app-container">
    <div class="datalistHeader">
      <div class="searchlist">
        <el-form
          :model="queryParams"
          :rules="rules"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="元数据名">
            <el-input
              v-model="queryParams.name"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="模块名">
            <el-input
              v-model="queryParams.moduleName"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="text" @click="handleQuery" class="gotoseach"
              >搜索</el-button
            >
            <span
              type="text"
              @click="resetQuery"
              style="
                color: #7483a6;
                font-size: 16px;
                font-weight: 500;
                cursor: pointer;
              "
              >重置</span
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="datalistTop">
        <el-button
          icon="el-icon-plus"
          size="mini"
          @click="newData"
          class="newdata"
          type="primary"
        >
          新建元数据
        </el-button>
      </div>
    </div>
    <div class="datalistCont">
      <!-- docstatus	锁定（0：否 / 1：是） -->
      <el-table
        v-loading="loading"
        :data="postList"
        stripe
        @selection-change="handleSelectionChange"
        max-height="555"
      >
        <el-table-column
          show-overflow-tooltip
          type="selection"
          width="100"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          label="元数据标识"
          prop="label"
        />
        <el-table-column show-overflow-tooltip label="元数据名" prop="name" />
        <el-table-column show-overflow-tooltip label="模块" prop="moduleName" />
        <el-table-column
          show-overflow-tooltip
          label="描述"
          prop="description"
        />
        <!-- <el-table-column show-overflow-tooltip label="锁定" prop="docstatus">
          <template slot-scope="scope"> -->
        <!-- <span v-if="scope.row.docstatus == 1">
              <el-checkbox
                checked
                :disabled="scope.row.docstatus == 1"
              ></el-checkbox>
            </span> -->
        <!-- <span  @change="handleLock(scope.row)">
              <el-checkbox></el-checkbox>
            </span>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <!-- 查看 -->
            <el-button
              type="text"
              icon="el-icon-view"
              class="nolockColor"
              @click="godetails(scope.row)"
            ></el-button>
            <!-- 编辑 -->
            <el-button
              type="text"
              v-if="scope.row.docstatus != 2"
              icon="el-icon-edit-outline"
              class="nolockColor"
              @click="gowriteDetails(scope.row)"
            ></el-button>
            <!-- 删除 -->
            <el-button
              type="text"
              v-if="scope.row.docstatus != 2"
              icon="el-icon-delete"
              class="nolockColor"
              @click="handleDelete(scope.row)"
            ></el-button>
            <!-- 生成 -->
            <!-- icon="el-icon-circle-check" -->
            <el-button
              type="text"
              class="nolockColor"
              v-if="scope.row.docstatus == 0"
              @click="generateBtn(scope.row)"
              >生成</el-button
            >
            <!-- 启用 -->
            <!-- icon="el-icon-video-pause" -->
            <el-button
              type="text"
              class="nolockColor"
              v-if="scope.row.docstatus == 1 || scope.row.docstatus == 3"
              @click="enableBtn(scope.row)"
              >启用</el-button
            >
            <!-- 停用 -->
            <!-- icon="el-icon-video-play" -->
            <el-button
              type="text"
              class="nolockColor"
              v-if="scope.row.docstatus == 2"
              @click="deactivateBtn(scope.row)"
              >停用</el-button
            >
            <!-- 业务数据 -->
            <!-- icon="el-icon-tickets" -->
            <el-button
              type="text"
              class="nolockColor"
              v-if="scope.row.docstatus != 0"
              @click="businessBtn(scope.row)"
              >业务</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="paginationbox">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.current"
          :page-size="queryParams.size"
          :page-sizes="[10, 20, 30, 40]"
          layout="total,prev, pager, next,sizes, jumper"
          @pagination="getList"
          background
          :total="pageTotal"
          :hide-on-single-page="true"
        >
        </el-pagination>
      </div> -->
      <div class="paginationbox">
        <el-pagination
          @size-change="handleSizeChange"
          :current-page.sync="queryParams.current"
          @current-change="handleCurrentChange"      
          :page-size="queryParams.size"
          layout="prev, pager, next"
          background
          :total="pageTotal"
          ref="pagination"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  fuzzyQueryPage,
  deleteMetadataInfo,
  isLock,
} from "@/api/metadata/metadata";

export default {
  name: "MetadataList",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      pastID: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      pageTotal: 0,
      // 岗位表格数据
      postList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //是否显示对勾
      checked: true,
      //编辑
      editShow: true,
      //删除
      deleteShow: true,
      // //是否存在生成
      // generateShow: true,
      // //启用
      // enableShow: false,
      // //停用
      // deactivateShow: false,
      //业务数据
      // businessShow: false,
      //是否有业务数据
      // havebusiness: false,
      // 查询参数是个变量
      queryParams: {
        current: 1,
        size: 10,
        moduleName: "",
        name: "",
      },
      status: 0, //元数据的状态
      ids: [],
      // 表单参数
      form: {},
      //传给业务数据的值
      toBusinessData: {},
      // 表单校验
      rules: {
        // name: [
        //   { required: true, message: "元数据名称不能为空", trigger: "blur" },
        // ],
        // moduleName: [
        //   { required: true, message: "模块名称不能为空", trigger: "blur" },
        // ],
      },
    };
  },
  activated(){
    console.log('zoulemeizou');
  },
  watch:{
     'queryParams.current'(newNum,oldNum){     
             console.log(newNum,oldNum);
     },
        deep:true//true 深度监听
  },
  created() {
    this.queryParams.name = localStorage.getItem("queryParamsName")? localStorage.getItem("queryParamsName"): "";
    this.queryParams.moduleName = localStorage.getItem("moduleName")? localStorage.getItem("moduleName"): "";
  //   // this.queryParams.current = localStorage.getItem("current")? parseInt(localStorage.getItem("current")): 1;
   if(localStorage.getItem("current")){
     this.$set(this.queryParams,'current', parseInt(localStorage.getItem("current")))
     this.getList();
    //  console.log(localStorage.getItem("current"),'zouzheli1111111');
   }else{
      this.$set(this.queryParams,'current',1)
      this.getList();
    //  console.log('zouzheli222222222');

   }
  },
  methods: {
    //新建元数据
    newData() {
      localStorage.setItem("status", 2);
      this.$router.push({
        path: "/createdList/newbasic",
        // query: { id: "1", name: "元数据", status: "2" },
      });
    },
    //编辑
    gowriteDetails(info) {
      var rowList = JSON.stringify(info);
      localStorage.setItem("info", rowList);
      localStorage.setItem("status", 1);
      this.$router.push({
        path: "/details/metadataDetails",
        // query: { info: info, name: "元数据", status: "1" },
      });
    },
    //查看
    godetails(info) {
      var rowList = JSON.stringify(info);
      localStorage.setItem("info", rowList);
      localStorage.setItem("status", 0);
      this.$router.push({
        path: "/details/metadataDetails",
        // query: { info: info, name: "元数据", status: "0" },
      });
    },
    /** 元数据列表信息 */
   getList() {
      fuzzyQueryPage(this.queryParams)
        .then((response) => {
          let newList = response.data;
          this.postList = newList.dataList;       
          this.pageTotal = newList.total;
          this.loading = false;           
        })
        .catch((err) => {
          // this.$message.error(err.message);
          this.loading = false;
          console.log(err);
        });
    },
    handleLock(row) {
      isLock({ metaDataId: row.id, status: this.status })
        .then((response) => {
          if (response.success) {
            this.getList();
            this.$message.success("操作成功");
          }
        })
        .catch((err) => {
          console.log(err);
          // this.$message.error(err.message);
        });
    },
    // // 表单重置
    // reset() {
    //   this.form = {
    //     id: undefined,
    //     modifiedBy: undefined,
    //     moduleName: undefined,
    //     description: "",
    //     sortOrder: "0",
    //   };
    //   this.resetForm("form");
    // },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$modal.msgSuccess("查询成功！");
      this.getList();
      if (this.queryParams.name) {
        localStorage.setItem("queryParamsName", this.queryParams.name);
      } else {
        localStorage.removeItem("queryParamsName");
      }
      if (this.queryParams.moduleName) {
        localStorage.setItem("moduleName", this.queryParams.moduleName);
      } else {
        localStorage.removeItem("moduleName");
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      this.queryParams.moduleName = "";
      this.queryParams.name = "";
      this.queryParams.current = 1;
      this.$modal.msgSuccess("重置成功！");
      localStorage.removeItem("moduleName");
      localStorage.removeItem("queryParamsName");
      localStorage.removeItem("current");
      this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      // if (this.havebusiness) {
      //   //如果有业务数据
      //   this.$modal.msgSuccess("该元数据存在业务数据，暂无法删除。");
      // } else {
      //如果没有业务数据
      this.ids = [];
      this.ids.push(row.id);
      let pastid = {
        ids: this.ids,
      };
      this.$modal.confirm("是否永久删除？删除后将无法恢复").then(() => {
        deleteMetadataInfo(pastid)
          .then((response) => {
            if (response.success) {
              this.$modal.msgSuccess("删除成功");
            }
            //判断这删除的是不是最后一条
            if (this.postList.length == 1) {
              if (this.queryParams.current == 1) {
                this.queryParams.current = 1;
              } else {
                this.queryParams.current = this.queryParams.current - 1;
              }
            }
            this.getList();
          })
          .catch(() => {});
      });
      // }
    },
    //在表头添加icon
    renderHeader(h, { column }) {
      // h即为cerateElement的简写，具体可看vue官方文档
      return h("div", [
        h("span", column.label),
        h("i", {
          class: "el-icon-setting",
          style: "color:#000000;margin-left:5px;fontSize: 18px;",
        }),
      ]);
    },
    //有个对照这样好看一些 对应的什么意思
    //    //启用
    //   enableShow:false,
    //   //停用
    //   deactivateShow:false,
    //   //业务数据
    //  businessShow:false,
    // 生成按钮的操作
    generateBtn(row) {
      this.status = 1;
      isLock({ metaDataId: row.id, status: this.status })
        .then((response) => {
          if (response.success) {
            this.getList();
            this.$message.success("操作成功");
          }
        })
        .catch((err) => {
          console.log(err);
          // this.$message.error(err.message);
        });
    },
    //启用的按钮操作
    enableBtn(row) {
      this.status = 2;
      isLock({ metaDataId: row.id, status: this.status })
        .then((response) => {
          if (response.success) {
            this.getList();
            this.$message.success("操作成功");
          }
        })
        .catch((err) => {
          console.log(err);
          // this.$message.error(err.message);
        });
    },
    //停用的按钮操作
    deactivateBtn(row) {
      this.status = 3;
      isLock({ metaDataId: row.id, status: this.status })
        .then((response) => {
          if (response.success) {
            this.getList();
            this.$message.success("操作成功");
          }
        })
        .catch((err) => {
          console.log(err);
          // this.$message.error(err.message);
        });
    },
    //业务数据按钮操作
    businessBtn(row) {
      localStorage.setItem("metadataId", row.id);
      localStorage.setItem("metaDataLabel", row.label);

      //去业务数据页面
      this.$router.push({
        path: "/details/businessData",
      });
    },
    handleSizeChange(val) {
      this.queryParams.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
      localStorage.setItem("current", this.queryParams.current);
    },
  },

};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.app-container {
  font-family: "PingFang SC", "microsoft yahei";
  background: #fff;
  height: 755px;
}
.datalistHeader {
  background: #fff;
  width: 96%;
  margin: auto;
  height: 95px;

  border-bottom: 1px solid #e7eaec;
  border-radius: 6px;
  // padding-top: 10px;
  .searchlist {
    float: left;
    margin: 30px -10px;
  }
  .datalistTop {
    float: right;
    margin: 30px 0px;

    .newdata {
      width: 140px;
      height: 40px;
      border-radius: 4px;
      padding: 7px 20px;
      font-size: 16px;
      color: #fff;
      // background-color:$--color-primary;
      // background-color: $base-menu-light-background;
    }
  }
}
.datalistCont {
  width: 100%;
  background: #fff;
  padding: 0 35px;
  .el-button--text {
    font-size: 18px;
    margin-right: 5px;
  }
  .nolockColor {
    color: #7483a6 !important;
  }
  .lockColor {
    color: #e7eaec !important;
  }
}
.paginationbox {
  height: 70px;
}
.el-pagination {
  text-align: right;
  padding-top: 20px;
}
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner,
::v-deep .el-checkbox__inner {
  background: #fff;
  border: 1px solid $labelColor;
  // border: 1px solid $labelColor;

}
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  border-color: $labelColor;
}
.gotoseach {
  // color: $base-menu-light-background !important;
}
// 分页
::v-deep .btn-prev {
  width: 95px;
  height: 40px;
  border-radius: 4px;
  background-image: url("../../assets/images/arrowLeft.png") !important;
}
::v-deep .btn-prev .el-icon-arrow-left {
  display: none !important;
}
::v-deep .btn-next .el-icon-arrow-right {
  display: none !important;
}
::v-deep .el-pager li {
  width: 45px;
  height: 40px;
  border-radius: 4px !important;
  line-height: 40px;
}
::v-deep .el-pager li:not(.disabled).active {
  background-color: $labelColor;
}
::v-deep .btn-next {
  width: 95px;
  height: 40px;
  border-radius: 4px;
  background-image: url("../../assets/images/arrowRight.png") !important;
}
::v-deep .is-checked .el-checkbox__inner {
  background: #fff;
  border-color: $labelColor;
}
::v-deep .el-checkbox__input .is-checked .el-checkbox__inner {
  background: #fff !important;
  border-color: $labelColor;
}
::v-deep .el-checkbox__inner::after {
  // border-color: $labelColor;
}
</style>
<style scoped>
/deep/ .el-table td.el-table__cell {
  padding: 5px !important;
  font-size: 16px;
  color: #272e3e;
}
/deep/ .el-table th.el-table__cell > .cell {
  font-size: 16px;
  color: #7483a6 !important;
}
/deep/.el-form-item__label {
  font-size: 16px;
  font-weight: 500;
}
/deep/ .searchlist .el-button--small {
  font-size: 16px;
  font-weight: 500;
  padding: 7px 20px;
}
/deep/.el-table th.el-table__cell.is-leaf {
  background-color: #edf0f4 !important;
}
/deep/.el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background-color: #f2f6fc !important;
}
/deep/.el-table th.el-table__cell.is-leaf {
  border: none;
}
/deep/.el-table td.el-table__cell {
  border: none;
}
/deep/.searchlist .el-form-item__label,
/deep/.searchlist .el-form-item__content {
  font-size: 18px !important;
}
/deep/.searchlist .el-input__inner {
  width: 224px;
  height: 40px;
  line-height: 40px;
}
</style>>

